<script setup>
import { h, nextTick, onMounted, ref, watch } from 'vue'
import { dayjs, ElMessage, ElNotification } from 'element-plus'
import Progress from '@/components/progress/index.vue'
import createMenuInstance from '@/components/rightClickMenu'
import { ArrowLeft as IconArrowLeft, ArrowRight as IconArrowRight, Search as IconSearch } from '@element-plus/icons-vue'
import {
  addMenuApi,
  deleteFileBatchApi,
  deleteMenuApi,
  downloadFileApi,
  getAllMenuAndFileApi,
  transferFileBatchApi,
  updateFileNameApi,
  updateMenuNameApi,
  uploadFileApi
} from '@/apis/fileManagement'
import { CollectionUtils } from '@/utils/CollectionUtils'
import { findFileType } from '@/utils/FileUtils'
import '@/assets/fonts/iconfont'
import { useRoute } from 'vue-router'

const route = useRoute();
const fileSrcList = ref([])
const searchInput = ref('')
const breadList = ref([{name: '文件', path: '/system/fileManagement'}])
const addDirDialogVisible = ref(false)
const fileInfoDialogVisible = ref(false)
const dirAddNameInput = ref('新建文件夹')
const dirAddLoading = ref(false)
const fileAccept = '.png,.jpeg,.jpg,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.rar,.7z,.txt'
const filePrefix = process.env.VUE_APP_BASE_URL

// 文件/目录相关
const fileUploadRef = ref(null)

const menuAndFileIsEmpty = ref(false)
const menuList = ref([{id: 1, menuLevel: 0, menuName: 'root', parentId: 1}])
const menuRecordList = ref([{fileList: [], menuList: []}])
const fileDetail = ref({})

// 文件转移
const fileTransferRequest = ref({
  fileIdList: [],
  menuIdList: [],
  menuId: -1,
  owner: route.query.groupId,
})
const fileTransferDialogVisible = ref(false)

const props = {
  label: 'name',
  isLeaf: 'leaf',
}


const dataTreeRef = ref(null)
const loadNode = (node, resolve) => {

  if (node.level === 0) {
    return resolve([{id: 1, name: 'root'}])
  }

  getAllMenuAndFileApi(node.data.id, route.query.groupId).then(({data}) => {
    const {menuList} = data
    const treeData = []
    if (!CollectionUtils.isEmpty(menuList)) {
      menuList.forEach(item => {
        treeData.push({
          id: item.id,
          name: item.menuName
        })
      })
    }
    resolve(treeData)
  })
}


const handleCheckChange = (data, checkObj) => {
  const checkedKeys = dataTreeRef.value.getCheckedKeys()

  if (CollectionUtils.isEmpty(checkedKeys)) {
    dataTreeRef.value.setCheckedKeys([])
    fileTransferRequest.value.menuId = -1
    return
  }
  dataTreeRef.value.setCheckedKeys([])
  dataTreeRef.value.setCheckedKeys([data.id])
  fileTransferRequest.value.menuId = data.id
}

const handleFindSelectImageIndex = (path) => {
  return (fileSrcList.value || []).indexOf(path)
}

const handleFileTransferConfirm = () => {
  if (-1 === fileTransferRequest.value.menuId) {
    ElMessage({type: 'warning', message: '请选择目录', showClose: true})
    return
  }
  transferFileBatchApi(fileTransferRequest.value).then(res => {
    handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
    ElMessage({type: 'success', message: '移动成功', showClose: true})
    fileTransferDialogVisible.value = false
  })
}

// 文件重命名
const fileRenameInput = ref('')
const fileRenameDialogVisible = ref(false)
const fileRenameUpdateLoading = ref(false)
const fileRenameInputRef = ref(null)
const fileRenameRequest = ref({
  id: '',
  fileName: ''
})
const handleFileRenameConfirm = () => {
  fileRenameUpdateLoading.value = true
  const {fileName} = fileRenameRequest.value
  const lastIndex = fileName.lastIndexOf('.')

  fileRenameRequest.value.fileName = fileRenameInput.value + (lastIndex === -1 ? '' : fileName.substring(lastIndex, fileName.length))
  updateFileNameApi(fileRenameRequest.value).then(res => {
    fileRenameDialogVisible.value = false
    handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
    ElMessage({type: 'success', message: '重命名成功！', showClose: true})
  }).finally(() => {
    fileRenameUpdateLoading.value = false
  })
}

// 文件夹详细信息
const menuInfoDialogVisible = ref(false)
const menuDetail = ref({})

// 下载文件
const handleFileDownload = (file) => {
  const downloadProgress = ref(0)
  const {id, fileName, fileSize} = file
  const notice = ElNotification({
    title: '下载进度',
    position: 'bottom-right',
    duration: 0,
    showClose: false,
    message: h(Progress, {
      progress: downloadProgress,
      type: '0',
      fileName: file.fileName,
      onComplete(status) {
        if ('1' === status) {
          setTimeout(() => {
            notice.close()
          }, 3000)
        }
      }
    })
  })
  downloadFileApi({id}, (e) => {
    downloadProgress.value = Math.floor(e.loaded * 100 / fileSize)
  }).then(res => {
    // 将返回的数据通过Blob的构造方法，创建Blob对象
    const blob = new Blob([res])
    if ('msSaveOrOpenBlob' in navigator) {
      window.navigator.msSaveOrOpenBlob(blob, fileName) // 针对浏览器
    } else {
      // 创建a标签
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      // 移除链接
      URL.revokeObjectURL(elink.href)
      // 移除a标签
      document.body.removeChild(elink)
    }
    downloadProgress.value = 100
  })
}

// 删除文件
const handleFileBatchDelete = (params) => {
  deleteFileBatchApi(params).then((res) => {
    handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
    ElMessage({type: 'success', message: '删除成功！', showClose: true})
  })
}

// 删除文件夹
const handleDeleteMenu = (menu) => {

  const {id} = menu
  deleteMenuApi({id}).then(res => {
    handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
    ElMessage({type: 'success', message: '删除成功！', showClose: true})
  })
}

// 文件夹重命名
const menuRenameInput = ref('')
const menuRenameDialogVisible = ref(false)
const menuRenameUpdateLoading = ref(false)
const menuRenameInputRef = ref(null)
const menuRenameRequest = ref({
  id: '',
  menuName: ''
})
const handleMenuRenameConfirm = () => {
  menuRenameUpdateLoading.value = true
  menuRenameRequest.value.menuName = menuRenameInput.value
  updateMenuNameApi(menuRenameRequest.value).then(res => {
    menuRenameDialogVisible.value = false
    handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
    ElMessage({type: 'success', message: '重命名成功！', showClose: true})
  }).finally(() => {
    menuRenameUpdateLoading.value = false
  })
}


const createRightClickMenu = (e, data) => {
  e.preventDefault()
  e.stopPropagation()
  createMenuInstance(e, data)
}

const createDirRightClickMenu = (menu, e) => {
  menuDetail.value = menu
  const data = [
    {
      icon: '',
      name: '删除',
      action: () => {
        handleDeleteMenu(menu)
      }
    },
    {
      icon: '',
      name: '移动',
      action: () => {
        fileTransferRequest.value.menuId = -1
        fileTransferRequest.value.fileIdList = []
        fileTransferRequest.value.menuIdList = [menuDetail.value.id]
        fileTransferDialogVisible.value = true
      }
    },
    {
      icon: '',
      name: '重命名',
      action: async () => {
        menuRenameDialogVisible.value = true
        const {id, menuName} = menu
        menuRenameRequest.value.id = id
        menuRenameRequest.value.menuName = menuName
        menuRenameInput.value = menuName
        await nextTick()
        menuRenameInputRef.value.focus()
        menuRenameInputRef.value.select()
      }
    },
    {
      icon: '',
      name: '详细信息',
      action: () => {
        menuInfoDialogVisible.value = true
      }
    }
  ]
  if (menuDetail.value.checked) {
    const afterMoveIndex = data.findIndex(item => '移动' === item.name)
    const afterDeleteIndex = data.findIndex(item => '删除' === item.name)
    data.splice(afterDeleteIndex, 1, {
      name: '批量删除',
      action: () => {
        const {menuList, fileList} = menuRecordList.value[menuRecordList.value.length - 1]
        const menuIdList = [], fileIdList = []
        menuList.forEach(item => {
          if (item.checked) {
            menuIdList.push(item.id)
          }
        })
        fileList.forEach(item => {
          if (item.checked) {
            fileIdList.push(item.id)
          }
        })

        handleFileBatchDelete({
          fileIdList,
          menuIdList
        })
      }
    })
    data.splice(afterMoveIndex, 1,
        {
          name: '批量移动', action: () => {
            fileTransferRequest.value.menuId = -1
            fileTransferRequest.value.menuIdList = []
            fileTransferRequest.value.fileIdList = []
            const {menuList, fileList} = menuRecordList.value[menuRecordList.value.length - 1]
            menuList.forEach(item => {
              if (item.checked) {
                fileTransferRequest.value.menuIdList.push(item.id)
              }
            })
            fileList.forEach(item => {
              if (item.checked) {
                fileTransferRequest.value.fileIdList.push(item.id)
              }
            })
            fileTransferDialogVisible.value = true
          }
        })
  }

  createRightClickMenu(e, data)
}

const createFileRightClickMenu = (file, e) => {
  fileDetail.value = file
  const data = [
    {
      icon: '',
      name: '下载',
      action: () => {
        handleFileDownload(fileDetail.value)
      }
    },
    {
      icon: '',
      name: '删除',
      action: () => {
        handleFileBatchDelete({
          fileIdList: [fileDetail.value.id]
        })
      }
    },
    {
      icon: '',
      name: '重命名',
      action: async () => {
        fileRenameDialogVisible.value = true
        const {id, fileName} = fileDetail.value
        fileRenameRequest.value.id = id
        fileRenameRequest.value.fileName = fileName
        const lastIndex = (fileName + '').lastIndexOf('.')

        fileRenameInput.value = lastIndex === -1 ? fileName : (fileName + '').substring(0, lastIndex)
        await nextTick()
        fileRenameInputRef.value.focus()
        fileRenameInputRef.value.select()
      }
    },
    {
      icon: '',
      name: '移动',
      action: () => {
        fileTransferRequest.value.menuId = -1
        fileTransferRequest.value.menuIdList = []
        fileTransferRequest.value.fileIdList = [fileDetail.value.id]
        fileTransferDialogVisible.value = true
      }
    },
    {
      icon: '',
      name: '查看详细信息',
      action: () => {
        fileInfoDialogVisible.value = true
      }
    }
  ]
  if (fileDetail.value.checked) {
    const afterMoveIndex = data.findIndex(item => '移动' === item.name)
    const afterDeleteIndex = data.findIndex(item => '删除' === item.name)
    data.splice(afterDeleteIndex, 1, {
      name: '批量删除',
      action: () => {
        const {menuList, fileList} = menuRecordList.value[menuRecordList.value.length - 1]
        const menuIdList = [], fileIdList = []
        menuList.forEach(item => {
          if (item.checked) {
            menuIdList.push(item.id)
          }
        })
        fileList.forEach(item => {
          if (item.checked) {
            fileIdList.push(item.id)
          }
        })

        handleFileBatchDelete({
          fileIdList,
          menuIdList
        })
      }
    })
    data.splice(afterMoveIndex, 1,
        {
          name: '批量移动',
          action: () => {
            fileTransferRequest.value.menuId = -1
            fileTransferRequest.value.menuIdList = []
            fileTransferRequest.value.fileIdList = []
            const {menuList, fileList} = menuRecordList.value[menuRecordList.value.length - 1]
            menuList.forEach(item => {
              if (item.checked) {
                fileTransferRequest.value.menuIdList.push(item.id)
              }
            })
            fileList.forEach(item => {
              if (item.checked) {
                fileTransferRequest.value.fileIdList.push(item.id)
              }
            })
            fileTransferDialogVisible.value = true
          }
        })
  }
  createRightClickMenu(e, data)
}

const createWhiteSpaceRightClickMenu = (e) => {
  const data = [
    {
      icon: '',
      name: '刷新',
      action: () => {
        handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
      }
    },
    {
      icon: '',
      name: '上传文件',
      action: () => {
        fileUploadRef.value.$el.querySelector('input').click()
      }
    },
    {
      icon: '../assets/imgs/file/file_folder_empty.png',
      name: '新建文件夹',
      action: () => {
        handleAddDirDialogOpen()
      }
    }
  ]
  createRightClickMenu(e, data)
}

const handleConvertFileSizeUnit = (size) => {
  if (size < 1024) {
    return size.toFixed(2) + 'B'
  }
  if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + 'KB'
  }
  if (size < 1024 * 1024 * 1024) {
    return (size / 1024 / 1024).toFixed(2) + 'MB'
  }
  return (size / 1024 / 1024 / 1024).toFixed(2) + 'GB'
}

const handleAddDirDialogOpen = () => {
  dirAddNameInput.value = '新建文件夹'
  addDirDialogVisible.value = true
}

const handleAddDirConfirm = () => {
  const {menuLevel, id} = menuList.value[menuList.value.length - 1]
  dirAddLoading.value = true
  addMenuApi({
    menuLevel: menuLevel + 1,
    menuName: dirAddNameInput.value,
    parentId: id,
    owner: route.query.groupId
  }).then(res => {
    ElMessage({message: '新建成功！', type: 'success', showClose: true})
    handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
    addDirDialogVisible.value = false
  }).catch(() => {
    ElMessage({message: '新建失败！', type: 'error', showClose: true})
  }).finally(() => {
    dirAddLoading.value = false
  })
}

const handleFileUpload = (file) => {
  const fd = new FormData()
  fd.append('multipartFile', file.file)
  const {id} = menuList.value[menuList.value.length - 1]
  fd.append('menuId', id)
  fd.append('owner', route.query.groupId)
  const uploadProgress = ref(0)
  const notice = ElNotification({
    title: '上传进度',
    position: 'bottom-right',
    duration: 0,
    showClose: false,
    message: h(Progress, {
      progress: uploadProgress,
      type: '1',
      onComplete(status) {
        if ('1' === status) {
          setTimeout(() => {
            notice.close()
          }, 3000)
        }
      }
    })
  })
  uploadFileApi(fd, (e) => {
    uploadProgress.value = Math.floor(e.loaded * 100 / e.total)
  }).then((res) => {
    handleFlushCurrentAllMenuAndFile(menuList.value[menuList.value.length - 1].id)
    uploadProgress.value = 100
  }).catch(() => {
    ElMessage({message: '上传失败！', type: 'error', showClose: true})
  })
}

const handleBeforeFileUpload = (rawFile) => {

  const {type, size, name} = rawFile
  if (name.length > 100) {
    ElMessage({type: 'warning', message: '文件名长度不能超过100', showClose: true})
    return false
  }
  if (size > 1024 * 1024 * 1024) {
    ElMessage({type: 'warning', message: '不支持上传大于1GB的文件', showClose: true})
    return false
  }

  // TODO 类型
}

const handleConvertFilePath = (file) => {
  let path = '/'
  for (let i = 1; i < menuList.value.length; i++) {
    path = path + ' > ' + menuList.value[i].menuName
  }
  if (file.fileName) {
    path = path + ' > ' + file.fileName
  }
  return path
}

const handleMenuBack = () => {
  if (menuList.value.length > 1) {
    menuList.value.pop()
    menuRecordList.value.pop()
    const {id} = menuList.value[menuList.value.length - 1]
    handleGetCurrentAllMenuAndFile(id)
    return
  }
  ElMessage({type: 'error', message: '已经到根目录了！', showClose: true})
}

let doubleClickTimeout = null
const menuChangeLoading = ref(false)
const handleEnterNextMenu = (menu, e) => {
  const {localName} = e.target
  if ('input' === localName) return
  clearTimeout(doubleClickTimeout)
  doubleClickTimeout = setTimeout(() => {
    menuList.value.push(menu)
    handleGetCurrentAllMenuAndFile(menu.id)
  }, 300)
}

const handleGetCurrentAllMenuAndFile = (id) => {
  menuChangeLoading.value = true
  getAllMenuAndFileApi(id, route.query.groupId).then(({data}) => {

    const {menuList, fileList} = data
    menuAndFileIsEmpty.value = CollectionUtils.isEmpty(fileList) && CollectionUtils.isEmpty(menuList)
    menuRecordList.value.push(data)
    fileSrcList.value = (fileList || []).map(item => filePrefix + item.filePath)
  }).finally(() => {
    menuChangeLoading.value = false
  })
}

const handleFlushCurrentAllMenuAndFile = (id) => {
  menuChangeLoading.value = true
  getAllMenuAndFileApi(id, route.query.groupId).then(({data}) => {
    const {menuList, fileList} = data
    menuAndFileIsEmpty.value = CollectionUtils.isEmpty(fileList) && CollectionUtils.isEmpty(menuList)
    if (menuRecordList.value.length > 1) {
      menuRecordList.value.pop()
    }
    menuRecordList.value.push(data)
    fileSrcList.value = (fileList || []).map(item => filePrefix + item.filePath)
  }).finally(() => {
    menuChangeLoading.value = false
  })
}

onMounted(() => {
  handleGetCurrentAllMenuAndFile(menuList.value[0].id)
})
//监听路由参数变化 刷新数据
watch(() => route.query, () => {
  //更新menulist
  menuList.value = [{id: 1, menuLevel: 0, menuName: 'root', parentId: 1}]
  handleGetCurrentAllMenuAndFile(menuList.value[0].id)
})
</script>
<template>
  <el-row justify="space-between">
    <el-col :span="12" class="breadcrumb-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <template v-for="(item, index) in breadList">
          <el-breadcrumb-item v-if="item.name" :key="index" :to="item.path">{{ item.name }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </el-col>
    <el-col :span="4">
      <el-input
          v-model="searchInput"
          style="width: 240px"
          placeholder="搜索文件"
          :prefix-icon="IconSearch"
      />
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="1" class="menu-back" v-if="menuList.length > 1" @click="handleMenuBack">
      <el-icon>
        <IconArrowLeft />
      </el-icon>
      &ensp;返回
    </el-col>
    <el-col :span="12" style="display: flex; align-items: center;">
      <el-breadcrumb :separator-icon="IconArrowRight">
        <template v-for="(item, index) in menuList">
          <el-breadcrumb-item v-if="item.menuName" :key="index">{{ item.menuName }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <div class="file-area m-top__8"
       @click.right.native="createWhiteSpaceRightClickMenu"
       v-show="!menuAndFileIsEmpty"
       v-loading="menuChangeLoading">
    <el-row>
      <el-col class="file-wrap"
              :span="2"
              v-for="(menu, index) in menuRecordList[menuRecordList.length - 1].menuList"
              :key="index"
              @click="handleEnterNextMenu(menu, $event)"
              @click.right.native="createDirRightClickMenu(menu, $event)"
              :style="menu.checked ? 'background-color: #eeeeee;' : ''">
        <!--        <div class="file-wrap__inner">-->
        <div class="checkbox-select">
          <input :id="'checkbox-menu' + index" type="checkbox" v-model="menu.checked">
          <label :for="'checkbox-menu' + index" @click="(e) => e.stopPropagation()"></label>
        </div>
        <svg class="icon" aria-hidden="true" style="height: 80px; width: 72px;">
          <use xlink:href="#icon-DIR"></use>
        </svg>
        <el-tooltip
            effect="dark"
            :content="menu.menuName"
            placement="bottom-start"
        >
          <div class="file-name">{{ menu.menuName }}</div>
        </el-tooltip>

        <div class="file-upload-time">
          {{ dayjs(menu.createTime).format('YYYY/MM/DD HH:mm') }}
        </div>
        <!--        </div>-->
      </el-col>
      <el-col class="file-wrap"
              :span="2"
              v-for="(file, index) in menuRecordList[menuRecordList.length - 1].fileList"
              :key="index"
              @click.right.native="createFileRightClickMenu(file, $event)"
              :style="file.checked ? 'background-color: #eeeeee;' : ''">
        <div class="checkbox-select">
          <input :id="'checkbox-file' + index" type="checkbox" v-model="file.checked">
          <label :for="'checkbox-file' + index"></label>
        </div>
        <div class="file-image m-top__8">
          <el-image v-if="'IMAGE' === findFileType(file.filePath)"
                    :src="filePrefix + file.filePath"
                    :zoom-rate="1"
                    :max-scale="2"
                    :min-scale="0.2"
                    :preview-src-list="fileSrcList"
                    :initial-index="handleFindSelectImageIndex(filePrefix + file.filePath)"
                    fit="cover"
                    style="width: 64px; height: 64px">

          </el-image>
          <svg v-else class="icon" aria-hidden="true">
            <use :xlink:href="'#icon-' + findFileType(file.filePath)"></use>
          </svg>
          <!--          <img :src="filePrefix + file.filePath" alt="">-->
        </div>
        <el-tooltip
            effect="dark"
            :content="file.fileName"
            placement="bottom-start"
        >
          <div class="file-name m-top__6">{{ file.fileName }}</div>
        </el-tooltip>
        <div class="file-upload-time">
          {{ dayjs(file.createTime).format('YYYY/MM/DD HH:mm') }}
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="empty-area m-top__24" v-show="menuAndFileIsEmpty">
    <div class="file-new-wrap" @click="handleAddDirDialogOpen">
      <div class="m-top__8">新建文件夹</div>
      <div class="image-wrap m-top__16">
        <svg class="icon preview preview-detail" aria-hidden="true">
          <use xlink:href="#icon-DIR"></use>
        </svg>
      </div>
    </div>
    <div class="file-new-wrap">
      <el-upload
          class="file-uploader"
          ref="fileUploadRef"
          action="#"
          :show-file-list="false"
          :http-request="handleFileUpload"
          :before-upload="handleBeforeFileUpload"
          :accept="fileAccept"
          name="multipartFile"
          style="display: unset"
      >
        <div class="m-top__8">上传文件</div>
        <div class="image-wrap m-top__16">
          <svg class="icon preview preview-detail" aria-hidden="true">
            <use xlink:href="#icon-UNKNOWN"></use>
          </svg>
        </div>
      </el-upload>
    </div>
  </div>

  <el-dialog class="dir-dialog-wrap" v-model="addDirDialogVisible" width="320" draggable
             style="border-radius: 6px">
    <template #header="{ titleId, titleClass }">
      <div class="dir-dialog-header">
        <h4 :id="titleId" :class="titleClass">新建文件夹</h4>
      </div>
    </template>
    <div class="dir-dialog-content" v-loading="dirAddLoading">
      <div class="dir-image">
        <svg class="icon preview-detail" aria-hidden="true">
          <use xlink:href="#icon-DIR"></use>
        </svg>
      </div>
      <el-input v-model="dirAddNameInput" style="width: 100%;" clearable placeholder="请输入文件夹名称" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDirDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddDirConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog class="file-info-dialog-wrap" v-model="fileInfoDialogVisible" width="320" draggable
             style="border-radius: 6px">
    <template #header="{ titleId, titleClass }">
      <div class="file-info-dialog-header">
        <h4 :id="titleId" :class="titleClass">{{ fileDetail.fileName }}</h4>
      </div>
    </template>
    <div class="file-info-dialog-content">
      <div class="file-image">
        <img class="preview" v-if="'IMAGE' === findFileType(fileDetail.fileName)"
             :src="filePrefix + fileDetail.fileName" alt="">
        <svg v-else class="icon preview preview-detail" aria-hidden="true">
          <use :xlink:href="'#icon-' + findFileType(fileDetail.fileName)"></use>
        </svg>
      </div>
      <div class="detail-wrap">
        <div class="title detail-gap">详细信息</div>
        <div>文件名</div>
        <div class="file-name-wrap info">{{ fileDetail.fileName }}</div>
        <div class="info">{{ handleConvertFileSizeUnit(fileDetail.fileSize) }}</div>
        <div class="file-path-wrap detail-gap">
          <div>文件位置</div>
          <div class="info">{{ handleConvertFilePath(fileDetail) }}</div>
        </div>
        <div class="file-create-time-wrap detail-gap">
          <div>云端创建时间</div>
          <div class="info">{{ dayjs(fileDetail.createTime).format('YYYY/MM/DD HH:mm') }}</div>
        </div>
        <div class="file-update-time-wrap detail-gap">
          <div>云端修改时间</div>
          <div class="info">{{ dayjs(fileDetail.updateTime).format('YYYY/MM/DD HH:mm') }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
  <el-dialog class="file-info-dialog-wrap" v-model="menuInfoDialogVisible" width="320" draggable
             style="border-radius: 6px">
    <template #header="{ titleId, titleClass }">
      <div class="file-info-dialog-header">
        <h4 :id="titleId" :class="titleClass">{{ menuDetail.menuName }}</h4>
      </div>
    </template>
    <div class="file-info-dialog-content">
      <div class="file-image">
        <svg class="icon preview-detail" aria-hidden="true">
          <use xlink:href="#icon-DIR"></use>
        </svg>
      </div>
      <div class="detail-wrap">
        <div class="title detail-gap">详细信息</div>
        <div>文件夹名</div>
        <div class="file-name-wrap info">{{ menuDetail.menuName }}</div>
        <!--        <div class="info">{{ handleConvertFileSizeUnit(fileDetail.fileSize) }}</div>-->
        <div class="file-path-wrap detail-gap">
          <div>文件夹位置</div>
          <div class="info">{{ handleConvertFilePath(menuDetail) }}</div>
        </div>
        <div class="file-create-time-wrap detail-gap">
          <div>云端创建时间</div>
          <div class="info">{{ dayjs(menuDetail.createTime).format('YYYY/MM/DD HH:mm') }}</div>
        </div>
        <div class="file-update-time-wrap detail-gap">
          <div>云端修改时间</div>
          <div class="info">{{ dayjs(menuDetail.updateTime).format('YYYY/MM/DD HH:mm') }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
  <el-dialog class="file-info-dialog-wrap"
             v-model="fileRenameDialogVisible"
             width="320"
             draggable
             style="border-radius: 6px">
    <template #header="{ titleId, titleClass }">
      <div class="file-info-dialog-header">
        <h4 :id="titleId" :class="titleClass">重命名</h4>
      </div>
    </template>
    <div class="file-info-dialog-content" v-loading="fileRenameUpdateLoading">
      <div class="file-image">
        <img :src="filePrefix + fileDetail.filePath" alt="">
      </div>
      <el-input ref="fileRenameInputRef" class="m-top__48" v-model="fileRenameInput" style="width: 100%;" clearable
                placeholder="请输入文件名称" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="fileRenameDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleFileRenameConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog class="file-info-dialog-wrap"
             v-model="menuRenameDialogVisible"
             width="320"
             draggable
             style="border-radius: 6px">
    <template #header="{ titleId, titleClass }">
      <div class="file-info-dialog-header">
        <h4 :id="titleId" :class="titleClass">重命名</h4>
      </div>
    </template>
    <div class="file-info-dialog-content" v-loading="menuRenameUpdateLoading">
      <div class="file-image">
        <svg class="icon preview-detail" aria-hidden="true">
          <use xlink:href="#icon-DIR"></use>
        </svg>
      </div>
      <el-input ref="menuRenameInputRef" class="m-top__48" v-model="menuRenameInput" style="width: 100%;" clearable
                placeholder="请输入文件夹名称" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="menuRenameDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleMenuRenameConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog class="file-info-dialog-wrap"
             v-model="fileTransferDialogVisible"
             width="320"
             draggable
             destroy-on-close
             style="border-radius: 6px">
    <template #header="{ titleId, titleClass }">
      <div class="file-info-dialog-header">
        <h4 :id="titleId" :class="titleClass">文件移动</h4>
      </div>
    </template>
    <div style="width: 100%; overflow: auto">
      <el-tree
          style=" min-height: 200px;  max-height: 300px; overflow: auto;"
          :props="props"
          :load="loadNode"
          lazy
          show-checkbox
          check-strictly
          accordion
          ref="dataTreeRef"
          node-key="id"
          @check="handleCheckChange"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="fileTransferDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleFileTransferConfirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.breadcrumb-wrap {
  margin-bottom: 20px;
}

.menu-back {
  display: flex;
  align-items: center;
  cursor: pointer
}

.file-area {
  height: 100%;

  .file-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    margin: 12px 12px 0;
    border-radius: 6px;
    cursor: pointer;
    //.file-wrap__inner::before {
    //
    //}

    &:hover {
      background-color: #eeeeee;
    }

    .checkbox-select {
      position: relative;

      input {
        position: absolute;
        width: 0;
        height: 0;
        -webkit-appearance: none;
        opacity: 0;
        outline: none;
      }
    }

    .checkbox-select label {
      position: absolute;
      width: 20px;
      height: 20px;
      left: -55px;
      top: -4px;
      border-radius: 4px;
      //transition: ;
    }

    &:hover .checkbox-select label {
      background-color: #fff;
    }

    .checkbox-select input:checked + label {
      background-color: #fff;
    }

    .checkbox-select input:checked + label::after {
      content: "";
      position: absolute;
      left: 7px;
      top: 2px;
      width: 6px;
      height: 11px;
      border-right: 1px solid #409eff;
      border-bottom: 1px solid #409eff;
      transform: rotate(45deg);
    }

    .dir-image {
      img {
        width: 80px;
        height: 80px;
      }
    }

    .file-image {
      img {
        width: 64px;
        height: 64px;
      }
    }

    .file-name {
      width: 98px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      line-height: 16px;
    }

    .file-upload-time {
      margin-top: 8px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.36);
    }

  }
}

.empty-area {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .file-new-wrap {
    padding: 12px 22px;
    margin-bottom: 128px;
    border-radius: 6px;
    background-color: #f5f7fa;
    cursor: pointer;
    overflow: hidden;

    .image-wrap {
      position: relative;

      img {
        position: relative;
        bottom: -24px;
        right: -20px;
        width: 64px;
        height: 64px;
        z-index: 0;
      }
    }
  }

  .file-new-wrap:first-child {
    margin-right: 12px;
  }

  .file-new-wrap:last-child {
    margin-left: 12px;
  }

}

.icon {
  width: 64px;
  height: 64px;
}

.dir-dialog-wrap {

  .dir-image {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;

    .preview-detail {
      width: 104px;
      height: 104px;
    }
  }

  .dir-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

:deep(.el-upload) {
  display: unset;
}

.file-info-dialog-wrap {
  .file-info-dialog-header {
    width: 90%;

    h4 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .file-info-dialog-content {
    .file-image {
      display: flex;
      justify-content: center;

      .preview-detail {
        width: 104px;
        height: 104px;
      }
    }

    .detail-wrap {
      .detail-gap {
        margin: 8px 0 16px;
      }

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }

      .info {
        font-size: 12px;
        margin-top: 2px;
        color: #303133;
      }
    }
  }
}

//.download-progress-dialog {
//  bottom: 0;
//}

.m-top__48 {
  margin-top: 48px;
}

.m-top__24 {
  margin-top: 24px;
}

.m-top__16 {
  margin-top: 16px;
}

.m-top__8 {
  margin-top: 8px;
}

.m-top__6 {
  margin-top: 6px;
}

</style>
